<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Text Updates</title>
	</head>
	<body>
		<div id="root"></div>
		<script type="module">
			import { measureName, measureMemory } from './util.js';
			import { createRoot, createElement } from 'framework';

			const root = createRoot(document.getElementById('root'));

			function component({ randomValue }) {
				return createElement('div', {}, [
					createElement('h2', {}, 'Test ' + randomValue),
					createElement('h1', {}, `===${randomValue}===`)
				]);
			}

			let result;

			performance.mark('start');
			for (let i = 0; i < 100; i++) {
				root.render(createElement(component, { randomValue: i }));
			}
			performance.mark('stop');
			performance.measure(measureName, 'start', 'stop');
			measureMemory();
		</script>
	</body>
</html>
